<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            color: black;
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            margin-left: 20px;
        }

        ul {
            font-size: 20px;
            padding-left: 50px;
            line-height: 30px;
            border: 1px solid red;
            width: 400px;
        }
        li:hover {
            color: orange;
            text-decoration:underline;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#/video" class="sp">视频</a>
        <a href="#/live" class="zb">直播</a>
    </div>
    <div class="content">

    </div>
</body>

</html>
<script>
    window.onhashchange = function () {
        if (location.hash == "#/video") {
            video_home()
        } else {
            live_home()
        }
    }
    var aEle = document.querySelectorAll('a')
    for (let i = 0; i < aEle.length; i++) {
        aEle[i].onclick = () => {
            for (let j = 0; j < aEle.length; j++) {
                aEle[j].style.color = 'black'
            }
            aEle[i].style.color = 'green'
        }
    }
    function video_home() {
        document.querySelector('.content').innerHTML =
            `<ul>
                <li>恋情况光?李小璐带小鲜肉路旁摆拍..</li>
                <li>陈的西子肚破离婚传闻，炫耀小买..</li>
                <li>赵木山徒弟的片酬，小沈阳片酬一年..</li>
                <li>考公比自己大的女明军，刘诗诗于绝..</li>
                <li>“十亿高婆”李冰冰，30007万豪..</li>
                <li>被老外退线的8位女年,宁静遭家事..</li>
            </ul>`
    }
    function live_home() {
        document.querySelector('.content').innerHTML =
            `<ul>
                <li>直搞|双11全球快递“云监工”</li>
                <li>慢直播|邂诟绝美云海日出</li>
                <li>慢直播I天舟五号已到位，将于近日...</li>
                <li>慢直温↓济南路实泉一天 下第一泉</li>
                <li>直播|立冬拥抱暖阳</li>
                <li>慢直播:邂近绝美云海日出</li>
            </ul>`
    }
</script>